<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教师信息网</title>
<style type="text/css">
.cx4 h3 {
	font-family: sans-serif;
	color: #d61043;
}

.form_B {
	margin-left: 500px;
	width: 175px;
}

.form_B p {
	color: brown;
	font-weight: bold;
}

.shutSave {
	display: block;
	margin: 0 50px 0 200px;
	width: 130px;
	height: 35px;
	background: #E25039;
	font-size: 18px;
	text-align: center;
	color: white;
	float: left;
	line-height: 35px;
	text-decoration: none;
}

.shutCancel {
	display: block;
	width: 130px;
	height: 35px;
	background: #dddddd;
	font-size: 18px;
	text-align: center;
	color: #3f3f3f;
	float: left;
	text-decoration: none;
	line-height: 35px;
}

#save {
	margin-left: 500px;
	margin-top: 50px;
}
</style>
<script src="source/jquery-2.1.4.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#insertTeacher").click(function() {
			$(".cx4").fadeToggle(300);
		});
	});

	function phoneFunction() {
		var x = document.getElementById("Phone");
		if (x.length != 11 || x == "") {
			/*
			 触发错误提示
			 */
			$("#phoneAlert").show();
		}
	}

	function ischinese(s) {
		var ret = true;
		for (var i = 0; i < s.length; i++)
			//遍历每一个文本字符
			ret = ret && (s.charCodeAt(i) >= 10000);//判断文本字符的unicode值
		return ret;
	}
	function nameFunction() {
		var str = document.getElementById("Name").value
		var val = ischinese(str); //判断是否包含中文
		if (!val)
			$("#nameAlert").show();
		else
			$("#nameAlert").hide();
	}

	function ageFunction() {
		var age = document.getElementById("Age");
		if (age.value > 60 || age == "") {
			/*
			 触发错误提示
			 */
			$("#ageAlert").show();
		}
	}

	function evaluateFunction() {
		var eval = document.getElementById("Evaluate");
		if (eval.value > 30 || eval == "") {
			/*
			 触发错误提示
			 */
			$("#evaluateAlert").show();
		}
	}

	function maxFunction() {
		var max = document.getElementById("Max");
		if (max.value > 100 || max == "") {
			/*
			 触发错误提示
			 */
			$("#maxAlert").show();
		}
	}

	function emailFunction() {
		var email = document.getElementById("Email");
		if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
			/*
			 触发错误提示
			 */
			$("#emailAlert").show();
		}
	}
</script>
</head>
<body>
	<h3 class="add_teacher1" id="insertTeacher"
		style="width: 80px; margin-left: 500px; border: groove; background-color: antiquewhite; color: #d61043">
		<span style="cursor: pointer">新增教师</span>
	</h3>

	<div class="cx4">
		<div class="form_B">
			<p>教师姓名:</p>
			<input name="Name" id="Name" type="text" class="input_A"
				oninput="nameFunction()" />
			<p id="nameAlert"
				style="float: left; display: block; border: solid; background: center; background-color: rgb(242, 215, 219); position: absolute; margin: 0 0 0 0; left: 680px; display: none">请正确输入姓名!</p>
		</div>

		<div class="form_B" id="Work">
			<p>教师职位:</p>
			<select name="TeachersWorks" id="TeachersWorks">
				<option value="" selected="selected">请选择职位</option>
				<option value="语文老师">语文老师</option>
				<option value="数学老师">数学老师</option>
				<option value="英语老师">英语老师</option>
				<option value="物理老师">物理老师</option>
				<option value="化学老师">化学老师</option>
				<option value="生物老师">生物老师</option>
				<option value="地理老师">地理老师</option>
				<option value="历史老师">历史老师</option>
				<option value="体育老师">体育老师</option>

			</select>
		</div>

		<div class="form_B">
			<p>教师性别:</p>

			<form id="Sex">
				男性： <input type="radio" checked="checked" name="Sex" value="male" />
				<br /> 女性： <input type="radio" name="Sex" value="female" />
			</form>
		</div>

		<div class="form_B">
			<p>教师年龄:</p>
			<input name="Age" id="Age" type="text" class="input_B"
				onchange="ageFunction()" />
			<p id="ageAlert"
				style="float: left; display: block; border: solid; background: center; background-color: rgb(242, 215, 219); position: absolute; margin: 0 0 0 0; left: 680px; display: none">年龄应小于60!</p>
		</div>

		<div class="form_B">
			<p>教师工龄:</p>
			<input name="Evaluate" id="Evaluate" type="text" class="input_B"
				onchange="evaluateFunction()" />
			<p id="evaluateAlert"
				style="float: left; display: block; border: solid; background: center; background-color: rgb(242, 215, 219); position: absolute; margin: 0 0 0 0; left: 680px; display: none">请输入小于30的整数!</p>
		</div>

		<div class="form_B" style="width: 500px">
			<p>教师电话：</p>
			<input name="Phone" id="Phone" type="text" class="input_B"
				onchange="phoneFunction()" />
			<p id="phoneAlert"
				style="float: left; display: block; border: solid; background: center; background-color: rgb(242, 215, 219); position: absolute; margin: 0 0 0 0; left: 680px; display: none">请正确输入11位手机号码!</p>
		</div>

		<div class="form_B">
			<p>教师邮箱：</p>
			<input name="Email" id="Email" type="text" class="input_B"
				onchange="emailFunction()" />
			<p id="emailAlert"
				style="float: left; display: block; border: solid; background: center; background-color: rgb(242, 215, 219); position: absolute; margin: 0 0 0 0; left: 680px; display: none">请正确输入邮箱!</p>
		</div>

		<div class="form_B">
			<p>课堂容量:</p>
			<input name="Max" id="Max" type="text" class="input_B"
				onchange="maxFunction()" />
			<p id="maxAlert"
				style="float: left; display: block; border: solid; background: center; background-color: rgb(242, 215, 219); position: absolute; margin: 0 0 0 0; left: 680px; display: none">请输入小于100的整数!</p>
		</div>

		<div class="form_B">
			<p>教师评价:</p>
			<select name="Evaluates" id="Evaluates">
				<option value="优">优</option>
				<option value="良">良</option>
				<option value="中">中</option>
				<option value="差">差</option>
			</select>
		</div>

		<div id="save"
			style="height: 80px; padding-top: 30px; width: 880px; display: block">
			<a href="javascript:void(0)" class="shutSave" id="TeachersInsert">保
				存</a> <a href="javascript:void(0)" class="shutCancel"
				onclick="divBury()">取 消</a>
		</div>
	</div>
</body>
</html>